import React, {
    PureComponent
} from 'react';

import {
    Image,
    Text,
    View,
    Dimensions,
    StyleSheet
} from 'react-native';

import {
    Counter,
    Press
} from './../../../components';

const {
    width,
    height
} = Dimensions.get('screen');

import * as Const from './../../../const';
import LinearGradient from 'react-native-linear-gradient';
import h_icon from './../.././../images/home/discover/h.png';

interface Props {
    time:number,
    onUpgrade:Function,
    onDialogClose:Function
}

class Upgrade extends PureComponent <Props>{

    static defaultProps = {
        time:0,
        onUpgrade:() => null,
        onDialogClose:() => null
    }

    private onUpgrade = () => {
        this.onClose();
        this.props.onUpgrade();
    }

    private onClose = () => {
        this.props.onDialogClose();
    }

    render() {
        const {
            time
        } = this.props;
        return (
            <View style={styles.mask}>
                <View style={styles.container}>
                    <View style={styles.content}>
                        <View style={styles.header}>
                            <Image source={h_icon}/>
                        </View>
                        <View style={styles.contentMain}>
                            <Text style={styles.text}>
                                Hey, you have swiped enough profiles.
                            </Text>
                            <Text style={styles.text}>
                                Have a break and check out {Counter.showTime(time)} later or upgrade for unlimited swipes.
                            </Text>
                            <Text style={styles.countDown}>
                                <Counter
                                    total={time}
                                    onEnd={this.onClose}
                                />
                            </Text>
                            <Press
                                style={styles.button}
                                onPress={this.onUpgrade}
                            >
                                <LinearGradient
                                    end={{x: 1, y: 1}}
                                    start={{x: 1, y: 0}}
                                    style={styles.buttonLinear}
                                    colors={[`#FFE600`, `#FFC800`]}
                                />
                                <Text style={styles.buttonText}>
                                    Upgrade now
                                </Text>
                            </Press>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}

export default Upgrade;

const styles = StyleSheet.create({
    mask:{
        width,
        height,
        alignItems:`center`,
        justifyContent:`center`
    },
    container:{
        width:280,
        paddingTop:64,
        alignSelf:`center`,
    },
    content:{
        height:344,
        borderRadius:8,
        borderWidth:1,
        borderColor:`#61677C`,
        backgroundColor:`#1E1E24`
    },
    header:{
        left:0,
        right:0,
        top:-64,
        position:`absolute`,
        alignItems:`center`
    },
    contentMain:{
        paddingTop:76,
        paddingHorizontal:26
    },
    text:{
        fontSize:14,
        color:`#fff`,
        fontWeight:`700`,
        marginBottom:16,
        lineHeight:21,
        textAlign:`center`
    },
    countDown:{
        fontSize:22,
        color:`#fff`,
        textAlign:`center`,
        paddingTop:30,
        fontFamily:Const.fontFamily
    },
    buttonLinear:{
        left:0,
        right:0,
        top:0,
        bottom:0,
        position:`absolute`,
    },
    button:{
        height:36,
        marginTop:36,
        alignItems:`center`,
        borderRadius:8,
        overflow:`hidden`,
        justifyContent:`center`
    },
    buttonText:{
        fontSize:14,
        color:`#323541`,
        fontFamily:Const.fontFamily
    }
}) as any;